<template>
  <div>
    <div>
      <van-nav-bar
        title="新建课程"
        right-text="完成"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
      />
    </div>
    <div class="box">
      <van-cell-group>
        <van-field v-model="value" placeholder="请输入课程名" />
      </van-cell-group>
      <div class="map">
        <van-uploader
          v-model="fileList"
          :after-read="afterRead"
          multiple
          :max-count="1"
        />上传封面
      </div>
      <van-cell
        style="color: #ccc"
        title="选择创建日期"
        :value="date"
        @click="show = true"
      />
      <van-calendar color="#1989fa" v-model="show" @confirm="onConfirm" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: [],
      date: "",
      value: "",
      show: false,
      file: "",
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
      console.log(2222);
      console.log(this.file);
      console.log(this.value);
      console.log(this.date);
      this.$router.push("/course");
    },

    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      this.file = file;
      // console.log(file);
    },
    formatDate(date) {
      return `${date.getMonth() + 1}/${date.getDate()}`;
    },
    onConfirm(date) {
      this.show = false;
      this.date = this.formatDate(date);
      // console.log(date);
    },
  },
};
</script>

<style scoped>
/deep/.van-nav-bar {
  border-bottom: 1px solid #eee;
}
.box {
  height: 100vh;
  background-color: #eee;
}
.map {
  margin: 5px 0;
  background-color: white;
  line-height: 88px;
  color: #ccc;
}
/deep/.van-nav-bar__text {
  color: rgb(0, 0, 0);
}
/deep/.van-icon {
  color: black;
}
</style>